<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
		<style>
			.site-doc-icon li {
				width: 322px;
			}
			
			.site-doc-icon li .layui-anim {
				width: 150px;
				height: 150px;
				line-height: 150px;
				margin:10px
				text-align: center;
				background-color: #009688;
				cursor: pointer;
				color: #fff;
				border-radius: 50%;
			}
			
			.site-doc-icon {
				margin-bottom: 50px;
				font-size: 0;
			}
			
			.site-doc-icon li {
				display: inline-block;
				vertical-align: middle;
				width: 150px;
				line-height: 25px;
				padding: 20px 0;
				margin-right: -1px;
				margin-bottom: -1px;
				border: 1px solid #e2e2e2;
				font-size: 14px;
				text-align: center;
				color: #666;
				transition: all .3s;
				-webkit-transition: all .3s;
			}
			
			.site-doc-icon li .layui-icon {
				display: inline-block;
				font-size: 36px;
			}
			
			.site-doc-icon li .fontclass {
				display: none;
			}
			
			.site-doc-icon li .name {
				color: #c2c2c2;
			}
			
			.site-doc-icon li:hover {
				background-color: #f2f2f2;
				color: #000;
			}
		</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>动画过程演示</legend>
</fieldset>
 
<!--<ul class="site-doc-icon">
  <li>
    <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
    <div class="code">layui-anim-up</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
    <div class="code">layui-anim-upbit</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
    <div class="code">layui-anim-scale</div>
  </li>
   <li>
    <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
    <div class="code">layui-anim-scaleSpring</div>
  </li>
</ul>-->
<ul class="site-doc-icon">
  <li>
    <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
    <div class="code">layui-anim-fadein</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
    <div class="code">layui-anim-fadeout</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
    <div class="code">layui-anim-rotate</div>
  </li>
  <li>
    <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
    <div class="code">追加：layui-anim-loop</div>
  </li>
</ul>          
               
          
		<script>
			layui.use('jquery', function() {
				var $ = layui.$;

				//演示动画
				$('.site-doc-icon .layui-anim').on('click', function() {
					var othis = $(this),
						anim = othis.data('anim');

					//停止循环
					if(othis.hasClass('layui-anim-loop')) {
						return othis.removeClass(anim);
					}

					othis.removeClass(anim);

					setTimeout(function() {
						othis.addClass(anim);
					});
					//恢复渐隐
					if(anim === 'layui-anim-fadeout') {
						setTimeout(function() {
							othis.removeClass(anim);
						}, 1300);
					}
				});
			});
		</script>

</body>
</html>